<template>
	<view class="contentView">
		<!-- tab栏切换动态改变激活样式 -->
		<view class="nav">
			<view class="nav-list" v-for="(item,index) in list" :key="item.id" @tap="changeAct(item)">
				<!-- 激活样式名字是红色 判断act==index 和act==item.id都行-->
				<view :class="[act==index?'name':'']">
					{{item.name}}
				</view>
				<!-- 名字下面的横线 -->
				<view :class="[act==index?'line':'']">
				</view>
			</view>
		</view>
		<!-- 内容的改变 -->
		<view class="content">
			<!-- 当前订单tab -->
			<view v-if="act==0" class="orderStyle">
				<view class="history" v-for="(item, index) in currentOrderList"
					@click="detail(item)">
					<view style="margin-bottom: 10rpx;">
						店铺名称：{{item.barbecueShopName}}
					</view>
					<view style="color: gray; font-size: 26rpx; border-top: 1rpx #d1d2d4 solid;">下单时间：{{item.orderTime}}
					</view>
					<view style="margin-top: 15rpx; display: flex; flex-wrap: nowrap;">
						<view v-for="(shop, sIndex) in item.shopCartList" v-if="sIndex < 3" class="card">
							<image :src="$getPicture(shop.shopPic)" style="width: 70px; height: 70px;"></image>
							<view class="card-view">{{shop.shopName}}</view>
							<view v-if="shop.flavourName" class="card-view" style="font-size: 26rpx; color: #8799a3;">{{shop.flavourName}}</view>
						</view>
						<view v-if="item.shopCartList.length > 3" class="cardMore">
							查看更多
						</view>
					</view>
					<view style="display: flex; ">
						<view style="flex: 1; font-size: 30rpx;">餐桌号：{{item.tableId}}</view>
						<view class="buyCouent">
							<view style="margin-right: 20rpx;font-size: 30rpx;">共{{item.shopCount}}件</view>
							<view style="font-size: 30rpx;">¥{{item.orderAmount}}</view>
						</view>
					</view>
					<view class="operate">
						<view style="display: flex; justify-content: center; height: 60rpx; margin-top: 10rpx;">
							<view @tap.stop="toOrder()" class="meal"
								style="margin-left: 30rpx; background-color: #1989FA; color: #fff;">去加菜</view>
							<view style="width: 200rpx;"></view>
							<view @tap.stop="toPay(item.orderId)" class="meal"
								style="margin-right: 30rpx; background-color: coral; color: #fff;">去买单</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 历史订单tab -->
			<view v-else class="orderStyle">
				<view class="history" v-for="(item, index) in historyList" @click="detail(item)">
					<view style="margin-bottom: 10rpx;">
						店铺名称：{{item.barbecueShopName}}
					</view>
					<view style="color: gray; font-size: 26rpx; border-top: 1rpx #d1d2d4 solid;">下单时间：{{item.orderTime}}
					</view>
					<view style="margin-top: 15rpx; display: flex; flex-wrap: nowrap;">
						<view v-for="(shop, sIndex) in item.shopCartList" v-if="sIndex < 3" class="card">
							<image :src="$getPicture(shop.shopPic)" style="width: 70px; height: 70px;"></image>
							<view class="card-view">{{shop.shopName}}</view>
							<view v-if="shop.flavourName" class="card-view" style="font-size: 26rpx; color: #8799a3;">{{shop.flavourName}}</view>
						</view>
						<view v-if="item.shopCartList.length > 3" class="cardMore">
							查看更多
						</view>
					</view>
					<view style="display: flex; ">
						<view style="flex: 1; font-size: 30rpx;">餐桌号：{{item.tableId}}</view>
						<view class="buyCouent">
							<view style="margin-right: 20rpx;font-size: 30rpx;">共{{item.shopCount}}件</view>
							<view style="font-size: 30rpx;">¥{{item.orderAmount}}</view>
						</view>
					</view>
				</view>
				<uni-load-more :status="status" iconType="auto" />
			</view>
		</view>

	</view>
</template>

<script>
	import common from "../../common/common.js"
	export default {
		data() {
			return {
				// 默认激活样式是第一个
				act: 0,
				list: [{
					id: 0,
					name: '当前订单'
				}, {
					id: 1,
					name: '历史订单'
				}],
				orderStatus: 1,
				tableid: 0,
				currentOrderList: [],
				historyList: [],
				status: 'more',
				pageNum: 1,
				pageSize: 5
			}
		},
		// 上拉加载更多,onReachBottom上拉触底函数
		onReachBottom: function() {
			this.status = 'more';
			this.loadMoreFunc();
		},
		onLoad(option) {
			this.tableid = option.tableId
		},
		onShow() {
			this.getOrderList();
		},
		methods: {
			changeAct(item) {
				// 激活样式是当前点击的对应下标--list中对应id
				this.act = item.id;
				// 可以根据点击事件改变内容
				this.content = item;
				//设置订单状态
				this.orderStatus = item.id;
				//重置分页
				this.pageNum = 1;
				//重置订单列表
				this.historyList = [];
				if (item.id == 0) {
					//查询当前订单 
					common.get({
						url: '/orderEat/orderInfo/wxList',
						formData: {
							orderStatus: this.orderStatus,
							tableId: this.tableid,
							pageNum: this.pageNum,
							pageSize: this.pageSize
						},
						success: (res) => {
							this.currentOrderList = res.data
						}
					})
				} else {
					//查询历史订单 
					common.get({
						url: '/orderEat/orderInfo/wxList',
						formData: {
							orderStatus: this.orderStatus,
							pageNum: this.pageNum,
							pageSize: this.pageSize
						},
						success: (res) => {
							this.historyList = res.data
						}
					})
				}

			},
			//上拉加载执行的方法
			loadMoreFunc() {
				if (this.act === 0) {
					// 如果在act == 0的tab，不执行加载更多的操作
					return;
				}
				this.status = 'loading'; //展示loading
				this.pageNum++; // 当上拉触发页码+
				common.get({
					url: '/orderEat/orderInfo/wxList',
					formData: {
						orderStatus: this.orderStatus,
						pageNum: this.pageNum,
						pageSize: this.pageSize
					},
					success: (res) => {
						if (res.data.length > 0) {
							for (var i = 0; i < res.data.length; i++) {
								this.historyList.push(res.data[i])
							}
						} else {
							this.status = 'noMore';
						}
					}
				})
			},
			//获取用户餐桌号
			getUserTable() {
				return new Promise((resolve, rejucet) => {
					common.get({
						url: '/orderEat/orderInfo/getWxTable',
						success: (res) => {
							this.tableid = res.data;
							resolve();
						},
						fail: (err) => {
							reject(err);
						}
					})

				})
			},
			//订单页面默认查看当前订单内容
			async getOrderList() {
				if (this.tableid == 0 || this.tableid == null) {
					await this.getUserTable();
				}
				console.log("餐桌号", this.tableid);
				common.get({
					url: '/orderEat/orderInfo/wxList',
					formData: {
						orderStatus: this.act,
						tableId: this.tableid,
						pageNum: this.pageNum,
						pageSize: this.pageSize
					},
					success: (res) => {
						this.currentOrderList = res.data
					}
				})
			},
			//查看详情
			detail(parm) {
				console.log("传递参数", parm);
				uni.navigateTo({
					url: "/pages/order/orderDetail?data=" + encodeURIComponent(JSON.stringify(parm)) + '&status=' +
						this.act
				})
			},
			toOrder() {
				console.log("餐桌数据", this.tableid);
				uni.navigateTo({
					url: '/pages/index/index?tableNum=' + this.tableid
				})
			},
			toPay(parm) {
				common.post({
					url: '/orderEat/orderInfo/toPay',
					formData: {
						orderId: parm
					},
					success: (res) => {
						uni.showToast({
							title: '请到吧台付款',
							complete: () => {
								setTimeout(() => {
									let item = {
										id: 1,
										name: '历史订单'
									}
									this.changeAct(item);
								}, 1000); // 延迟1秒后跳转
							}
						});
					}
				})
			}


		}
	}
</script>

<style>
	.contentView {
		width: 100%;
		height: 100vh;
		background-color: #F5F5F5;
	}

	.nav {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #fff;
		font-size: 30rpx;
		color: black;
		letter-spacing: 2.14rpx;
	}

	.nav-list {
		height: 100%;
		opacity: .9;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.nav-list .name {
		color: black;
	}

	.nav-list .line {
		margin-top: 10rpx;
		width: 100rpx;
		height: 4rpx;
		background-color: #F3A85F;
	}

	/* 内容 */
	.content {
		margin-top: 40rpx;
		background-color: #F5F5F5;
	}

	.orderStyle {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.history {
		background-color: #fff;
		border-radius: 8px;
		width: 90%;
		height: auto;
		padding: 10px 10px;
		margin-bottom: 20rpx;
	}

	.current {
		background-color: #fff;
		border-radius: 8px;
		width: 90%;
		height: 400rpx;
		padding: 10px 10px;
		margin-bottom: 20rpx;
	}

	.card {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 70px;
		margin-right: 20rpx;
	}

	.card-view {
		white-space: nowrap;
		/* 防止文本换行 */
		overflow: hidden;
		/* 超出部分隐藏 */
		text-overflow: ellipsis;
		/* 超出部分显示为省略号 */
		width: 70px;
		/* 确保容器宽度为70px */

	}

	.cardMore {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 80px;
	}

	.buyCouent {
		width: 300rpx;
		display: flex;
		justify-content: end;
	}

	.operate {
		margin-top: 20rpx;
		width: 100%;
		border-top: 1rpx #d1d2d4 solid;
	}

	.meal {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 60rpx;
		flex: 1;
		margin-bottom: 10rpx;
		border-radius: 40rpx;
	}
</style>